<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Charon-Music</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
* {
	margin: 0;
	padding: 0;
}

.header {
	width: 60%;
	min-width: 800px;
	max-width: 1300px;
	height: 90px;
	line-hegith: 30px;
	background: url(/sstatic/img/timg.jpg);
	background-size: 100% 100%;
	margin: 0 auto;
}

.header a {
	display: block;
	/*width: 18%;
	max-width: 240px;*/
	text-align: center;
	float: left;
	height: 100%;
	line-height: 90px;
	text-decoration: none;
	font-size: 60px;
	color: #000;
}

.header nav {
	width: 30%;
	margin-left: 5%;
	height: 100%;
	float: left;
	display: flex;
	height: 100%;
}

.header nav a {
	margin-top: 10px;
	height: 90%;
	flex: 1;
	font-size: 16px;
}

.content {
	width: 60%;
	min-width: 800px;
	max-width: 1300px;
	background: url(/sstatic/img/timg.jpg);
	background-size: 100% 100%;
	margin: 0 auto;
}

.infoBtn {
	margin-top: 30px;
	margin-right: 1%;
	float: right;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.musicListIconBtn {
	height: 0px;
	max-width: 100px;
	min-width: 40px;
	max-height: 100px;
	min-height: 40px;
	margin-left: 0%;
	float: left;
	width: 10%;
	/* padding-bottom:100%; */
	border-radius: 50%;
}
</style>
</head>
<body style="background: #F7F7F7">
	<div>
		<!-- 网页导航 -->
		<div style="weight: 100%; background: #FFFFFF; border-bottom: 1px solid #E8E8E8;">
			<div class="header">
				<a href="javascript:;" style="color: #95A2FF; text-indent: 0%">
					Charon </a>
				<nav>
					<a href="http://charon.fun">首页</a> <a
						href="http://charon.fun/music">音乐</a> <a
						href="http://charon.fun/video">视频</a> <a
						href="http://charon.fun/video">个人</a>
				</nav>
				<div>
					<!-- -------------------------搜索框---------------------------- -->
					<!-- /.col-lg-6 -->
					<div class="col-lg-6" style="width: 25%;">
						<div class="input-group">
							<input type="text" class="form-control"
								placeholder="Search for..."> <span
								class="input-group-btn">
								<button class="btn btn-default" type="button">Go!</button>
							</span>
						</div>
						<!-- /input-group -->
					</div>
					<!-- 注意bg-size必须写到资源后面 -->
					<button class="infoBtn"
						style="background: url(/pluto/static/img/headIcon.jpg); background-size: 100% 100%;"></button>
					<button class="infoBtn"
						style="margin-right: 2%; background: url(/pluto/static/img/message.png); background-size: 100% 100%;"></button>		
					<!-- -------------------------搜索框---------------------------- -->
				</div>
			</div>
		</div>
	</div>
	<!-- 主体内容 -->
	<div class="content"
		style="min-width: 800px; max-width: 1200px; background: #F5FFFF">
		<!-- 内容列 -->
		<div style="width: 70%; background: #FFFFFF">
			<div
				style="width: 100%; height: 0px; padding-bottom: 13%; background: #FFFFFF">
				<button class="musicListIconBtn"
					style="background: url(/pluto/static/img/headIcon.jpg); background-size: 100% 100%; width: 18.57%; height: 0px; padding-bottom: 12%"></button>
				<a style="margin: 0; line-height: 100%; width: 100%; height: 10%;">歌曲列，待后台爬虫完成需要填充的地方</a>
			</div>
			<div
				style="width: 100%; height: 0px; padding-bottom: 13%; background: #FFFFFF">
				<button class="musicListIconBtn"
					style="background: url(/pluto/static/img/headIcon.jpg); background-size: 100% 100%; width: 18.57%; height: 0px; padding-bottom: 12%"></button>
				<a style="margin: 0; line-height: 100%; width: 100%; height: 10%;">歌曲列，歌曲头像动画效果待确定</a>
			</div>
			<div
				style="width: 100%; height: 0px; padding-bottom: 13%; background: #FFFFFF">
				<button class="musicListIconBtn"
					style="background: url(/pluto/static/img/headIcon.jpg); background-size: 100% 100%; width: 18.57%; height: 0px; padding-bottom: 12%"></button>
				<a style="margin: 0; line-height: 100%; width: 100%; height: 10%;">歌曲列，旋转或根据音频动态改变</a>
			</div>
			<div
				style="width: 100%; height: 0px; padding-bottom: 13%; background: #FFFFFF">
				<button class="musicListIconBtn"
					style="background: url(/pluto/static/img/headIcon.jpg); background-size: 100% 100%; width: 18.57%; height: 0px; padding-bottom: 12%"></button>
				<a style="margin: 0; line-height: 100%; width: 100%; height: 10%;">歌曲列，屏幕适配手机适配未配置好</a>
			</div>
			<div
				style="width: 100%; height: 0px; padding-bottom: 13%; background: #FFFFFF">
				<button class="musicListIconBtn"
					style="background: url(/pluto/static/img/headIcon.jpg); background-size: 100% 100%; width: 18.57%; height: 0px; padding-bottom: 12%"></button>
				<a style="margin: 0; line-height: 100%; width: 100%; height: 10%;">歌曲列，显示信息条目，以上待定</a>
			</div>
		</div>
		<!-- 侧边栏 -->
		<div style="width: 28%; float: right; background: #FFFFFF;display:inline">
				菜单列，个人信息，歌曲，电影分享链接，分享接口需要验证
		</div>
	</div>
	</div>
</body>
</html>